<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
            我们都使用过ajax发送请求获取数据，但是你有没有想过一个场景呢，你这次发送请求获得的数据就是下次你要发送请求的参数，如此循环往复，不说多的，嵌套个三次的场景在开发中还是会遇到的，那么问题来了，你套三层ajax，整个代码的结构是不是很乱？而且如果出了问题，维护起来是不是也十分的麻烦？不过别担心，promise的出现就很好的解决了这个问题，还记得上节课我们说到then的链式调用是promise的精髓所在吗，所以下节课我们就来讲讲为什么以及怎么解决回调地狱的问题
        */
        const url = 'http://localhost:9090'

        // 怎么样，才两层是不是就感觉自己已经有点难以理解了
        let xhr = new XMLHttpRequest()
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    console.log('第一调用成功，' + xhr.response)
                    let xhr2 = new XMLHttpRequest()
                    xhr2.onreadystatechange = () => {
                        if (xhr2.readyState == 4) {
                            if (xhr2.status == 200) {
                                console.log('第二次调用成功，' + xhr2.response)
                            }
                        }
                    }
                    xhr2.open('GET',url)
                    xhr2.send()
                }
            }
        }
        xhr.open('GET', url)
        xhr.send()
    </script>
</body>

</html>